<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/layout/adminTemplate.xhtml">

        <ui:define name="content">

            <p:panel header="Editar datos de la escuela" id="pnlDatosEscuela" >
                <h:form enctype="multipart/form-data" id="datos" prependId="false">
                    <p:growl id="messages"/>
                    <h:panelGrid columns="2" id="pnlDatosNoticia" style="border: none !important;">
                        <h:outputLabel for="nombre" value="Nombre de la Escuela:" />
                        <p:inputText id="nombre" value="#{gestorEscuela.escuela.nombre}"  style="width: 300px;" required="true" requiredMessage="El campo Nombre de la Escuela es obligatorio"/>
                        <h:outputLabel value="Logo de la Escuela"/>
                        <p:graphicImage value="#{gestorEscuela.imagen}"  width="200" height="200" />
                        <h:outputText value="&nbsp;"/>
                        <p:fileUpload
                            mode="advanced" 
                            fileUploadListener="#{gestorEscuela.upload}"
                            allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
                            dragDropSupport="true"
                            required="true"
                            auto="true"
                            requiredMessage="Debe seleccionar una imagen para la noticia"
                            />
                        <h:outputLabel for="descripcion"  value="Descripción:" />
                        <p:inputText id="descripcion" value="#{gestorEscuela.escuela.descripcion}"  style="width: 300px;"/>
                        <h:outputLabel for="mail" value="E-mail:" />
                        <p:inputText id="mail" value="#{gestorEscuela.escuela.email}"  style="width: 300px;"/>
                        <h:outputLabel for="facebook" value="Facebook:" />
                        <p:inputText id="facebook" value="#{gestorEscuela.escuela.facebook}" style="width: 300px;"/>
                        <h:outputLabel for="twitter" value="Twitter:" />
                        <p:inputText id="twitter"  value="#{gestorEscuela.escuela.twitter}" style="width: 300px;"/>
                        <h:outputLabel for="reglamento" value="Reglamento" />
                        <p:inputText id="reglamento" value="#{gestorEscuela.escuela.reglamento}"  style="width: 300px;"/>
                        <h:outputLabel for="plan" value="Plan de Trabajo" />
                        <p:inputText id="plan" value="#{gestorEscuela.escuela.planTrabajo}"  style="width: 300px;"/>
                        <h:inputHidden id="lat" value="#{gestorEscuela.lat}" />  
                        <h:inputHidden id="lng" value="#{gestorEscuela.longi}"/>

                    </h:panelGrid>
                    <h:outputLabel for="Ubicacion" value="ubicacion" />
                    <br/>
                    <p:gmap id="gmap" center="#{gestorEscuela.latitud},#{gestorEscuela.longitud}" zoom="16" type="ROADMAP"   
                            style="width:500px;height:300px"  
                            model="#{gestorEscuela.emptyModel}"
                            onPointClick="handlePointClick(event);"
                            widgetVar="map">
                    </p:gmap>
                    <br/>
                    <h:outputLabel for="antecedentes" value="Antecedentes"/>
                    <br/>
                    <p:editor id="antecedentes" value="#{gestorEscuela.escuela.antecedentes}" height="300" width="600"/>
                    <br/>
                    <h:outputLabel for="mision" value="Misión"/>
                    <br/>
                    <p:editor id="mision" height="300" width="600" value="#{gestorEscuela.escuela.mision}"/>
                    <br/>
                    <h:outputLabel for="vision" value="Visión"/>
                    <br/>
                    <p:editor id="vision" height="300" width="600" value="#{gestorEscuela.escuela.vision}"/>
                    <p:commandButton value="Guardar" action="#{gestorEscuela.guardar}"  ajax="false"  update="messages"/>
                    <p:commandButton value="Cancelar" ajax="false"/>




                </h:form>
                <script type="text/javascript">
                    var currentMarker = null;

                    function handlePointClick(event) {
                        if (currentMarker !== null)
                            currentMarker.setMap(null);
                        currentMarker = null;
                        if (currentMarker === null) {
                            document.getElementById('lat').value = event.latLng.lat();
                            document.getElementById('lng').value = event.latLng.lng();
                            currentMarker = new google.maps.Marker({
                                position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                            });
                            PF('map').addOverlay(currentMarker);


                        }
                    }
                </script>
            </p:panel>
        </ui:define>
    </ui:composition>
</html>
